<template>
<div class="app">
    <div class="house-detail">
      <div>
        <!-- 头部 -->
        <van-nav-bar
          :title="list.community"
          left-arrow
          @click-left="$router.back()"
          :border="false"
        >
          <template #right>
            <van-icon name="share-o" size="18" />
          </template>
        </van-nav-bar>
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in list.houseImg" :key="item.id"
            ><img :src="'http://www.xiaoshuaipeng.com:8080' + item" alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>
      <!-- 详情 -->
      <div class="HouseDetail_info">
        <h3>{{ list.title }}</h3>
        <div class="HouseDetail_tags">
          <span v-for="item in list.tags" :key="item.id">{{ item }}</span>
        </div>
        <div class="HouseDetail_price">
          <div class="price">
            <div>{{ list.price }}/月</div>
            <span class="txt-color">租金</span>
          </div>
          <div class="house">
            <div>{{ list.roomType }}</div>
            <div class="txt-color">房型</div>
          </div>
          <div class="area">
            <div>{{ list.size }}平米</div>
            <div class="txt-color">面积</div>
          </div>
        </div>
        <div class="HouseDetail_msg">
          <div class="left-item">
            <div><span class="title">装修:</span> <span>精装</span></div>
            <div>
              <span class="title">楼层:</span> <span>{{ list.floor }}</span>
            </div>
          </div>
          <div class="right-item">
            <div>
              <span class="title">朝向:</span>
              <span v-for="item in list.oriented" :key="item.id">{{
                item
              }}</span>
            </div>
            <div><span class="title">房型:</span> <span>普通住宅</span></div>
          </div>
        </div>
      </div>
      <!-- 地图 -->
      <div class="HouseDetail_map">
        <div class="HouseDetail_mapTitle">
          小区：<span>{{ list.community }}</span>
        </div>
        <div id="map_app">
          地图
        </div>
      </div>
      <!-- 房屋配套 -->
      <div class="HouseDetail_about">
        <div class="HouseDetail_houseTitle">房屋配套</div>
        <ul class="HousePackage_root" v-if="list.supporting !== []">
          <li
            class="HousePackage_item"
            v-for="item in list.supporting"
            :key="item.id"
          >
            <p><i class="iconfont">tupian</i></p>
            {{ item }}
          </li>
        </ul>
        <div class="HouseDetail_titleEmpty" v-else>暂无数据</div>
      </div>
      <!-- 房源概况 -->
      <div class="HouseDetail_set">
        <div class="HouseDetail_houseTitle">房源概况</div>
        <div class="HouseDetail_contact">
          <div class="HouseDetail_user">
            <img src="http://124.223.73.204:8080/img/avatar.png" alt="" />
            <div class="HouseDetail_useInfo">
              <div>王女士</div>
              <div class="HouseDetail_userAuth">
                <van-icon name="map-marked" />已经认证
              </div>
            </div>
          </div>
          <div class="HouseDetail_userMsg">发消息</div>
        </div>
        <div class="HouseDetail_descText" v-if="list.description !== ''">
          {{ list.description }}
        </div>
        <div class="HouseDetail_descText" v-else>暂无房屋描述</div>
      </div>
      <!-- 猜你喜欢 -->
      <div class="HouseDetail_recommend">
        <div class="HouseDetail_houseTitle">猜你喜欢</div>
        <div class="HouseDetail_items">
          <div class="HouseItem_house">
            <div class="HouseItem_img">
              <img src="http://124.223.73.204:8080/img/message/1.png" alt="" />
            </div>
            <div class="HouseItem_content">
              <h3>安贞西里 3室1厅</h3>
              <div class="HouseItem_desc">72.32㎡/南 北/低楼层</div>
              <div><span class="HouseItem_tag">随时看房</span></div>
              <div class="HouseItem_price"><span>4500</span>元/月</div>
            </div>
          </div>
          <div class="HouseItem_house">
            <div class="HouseItem_img">
              <img src="http://124.223.73.204:8080/img/message/1.png" alt="" />
            </div>
            <div class="HouseItem_content">
              <h3>安贞西里 3室1厅</h3>
              <div class="HouseItem_desc">72.32㎡/南 北/低楼层</div>
              <div><span class="HouseItem_tag">随时看房</span></div>
              <div class="HouseItem_price"><span>4500</span>元/月</div>
            </div>
          </div>
          <div class="HouseItem_house">
            <div class="HouseItem_img">
              <img src="http://124.223.73.204:8080/img/message/1.png" alt="" />
            </div>
            <div class="HouseItem_content">
              <h3>安贞西里 3室1厅</h3>
              <div class="HouseItem_desc">72.32㎡/南 北/低楼层</div>
              <div><span class="HouseItem_tag">随时看房</span></div>
              <div class="HouseItem_price"><span>4500</span>元/月</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部按钮 -->
      <div class="HouseDetail_fixedBottom">
        <div class="am-flexbox-item opt" @click='sc'>
          <van-icon name="star" class="active" v-if="fl"/>
          <van-icon name="star" v-else/>
          <span>收藏</span>
        </div>
        <div class="am-flexbox-item">在线咨询</div>
        <div class="am-flexbox-item"><a href="#">电话预约</a></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/until/stroage'
import {detailHome,collect,canlcollect,yncollect} from '../api/user'
export default {
   name:'MessageHome',
 data () {
 return {
      fl: '',
      list: {
        oriented: '',
        tags: '',
        houseImg: []
      }
    }
 },

 components: {
    
 },
created(){
  this.Getdata()
},
 methods: {
  async Getdata(){
    const {data}=await detailHome(this.$route.params.code)
    this.list=data.body
    console.log(data);
    if(getToken()){
       const res=await yncollect(this.$route.params.code)
    console.log(res);
    this.fl=res.data.body.isFavorite
    }
   
  },
  async sc(){
    const token=getToken()
    if(token){
      this.fl = !this.fl
       if(this.fl){
      const res=await collect(this.$route.params.code)
      console.log(res);
    }else{
      const res = await canlcollect(this.$route.params.code)
      console.log(res);
    }
    }
    else{
       this.$dialog.confirm({
        title: '提示',
        message: '你没有登录，是否登录',
      }).then(()=>{
        this.$router.push('/regi')
      }).catch(()=>{

      })
    }
   
  }
 }
}
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.house-detail {
  position: relative;
  padding-bottom: 50px;
  background-color: #f6f5f6;
  line-height: 1.5;
}
div {
    .van-nav-bar {
    background-color:  rgba(0,0,0,0);
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
  .van-nav-bar__content {
    z-index: 5;
    color: rgb(255, 255, 255);
    background-color: transparent;
    width: 100%;
  }
  }
  ::v-deep .van-nav-bar .van-icon {
    color: #333 !important;
  }
.my-swipe .van-swipe-item {
  position: relative;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  // background-color: #39a9ed;
  height: 252px;

  img {
    width: 100%;
    height: 100%;
  }
}
}
.HouseDetail_info {
  background-color: #fff;
  padding: 15px;
  h3 {
    font-weight: normal;
    font-size: 16px;
    color: #333;
  }
  .HouseDetail_tags {
    span {
      color: #39becd;
      background: #e1f5f8;
      display: inline-block;
      font-size: 12px;
      border-radius: 3px px;
      padding: 4px 5px;
      margin-right: 5px;
      line-height: 12px;
    }
  }
  .HouseDetail_price {
    border-top: solid 1px #cecece;
    border-bottom: solid 1px #cecece;
    margin: 15px 0;
    padding: 15px 0;
    display: flex;
    text-align: center;
    color: #fa5741;
    font-size: 18px;
    font-weight: bolder;

    .txt-color {
      color: #999;
      font-size: 14px;
      font-weight: normal;
    }
    .price {
      margin-left: 0;
      flex: 1 1;
      min-width: 10px;
    }
    .house {
      flex: 1 1;
      margin-left: 8px;
      min-width: 10px;
    }
    .area {
      flex: 1 1;
      margin-left: 8px;
      min-width: 10px;
    }
  }
  .HouseDetail_msg {
    font-size: 14px;
    display: flex;
    .left-item {
      flex: 1 1;
      min-width: 10px;
      .title {
        display: inline-block;
        color: #999;
        padding-right: 5px;
        line-height: 26px;
      }
    }
    .right-item {
      flex: 1 1;
      margin-left: 8px;
      min-width: 10px;
    }
  }
}
.HouseDetail_map {
  margin-top: 10px;
  background: #fff;
  .HouseDetail_mapTitle {
    margin: 0 3%;
    line-height: 44px;
    color: #666;
  }
  #map_app {
    height: 145px;
    text-align: center;
  }
}
.HouseDetail_about {
  margin-bottom: 10px;
  padding: 0 10px;
  //   background: #fff222;
  background-color: #fff;
  .HouseDetail_houseTitle {
    font-weight: 600;
    margin-bottom: 10px;
    padding: 15px 0;
    font-size: 14px;
    border-bottom: solid 1px #cecece;
  }
  .HouseDetail_titleEmpty {
    padding: 10px 0;
    font-size: 13px;
  }
  .HousePackage_root {
    padding: 10px 0;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    text-align: center;
    background: #fff;
    .HousePackage_item {
      margin: 10px 0;
      width: 20%;
      line-height: 23px;
      font-size: 14px;
      .iconfont {
        font-size: 23px;
        font-family: "iconfont" !important;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
      }
    }
  }
}
.HouseDetail_set {
  margin: 10px 0px;
  padding: 0 10px;
  line-height: 150%;
  background: #fff;
  .HouseDetail_houseTitle {
    font-weight: 600;
    margin-bottom: 10px;
    padding: 15px 0;
    font-size: 14px;
    line-height: 1.5;
    border-bottom: solid 1px #cecece;
  }
  .HouseDetail_descText {
    line-height: 1.5;
    padding: 10px 0;
    color: #333;
    font-size: 14px;
  }
  .HouseDetail_contact {
    position: relative;
    .HouseDetail_userMsg {
      position: absolute;
      right: 15px;
      top: 20px;
      color: #33be85;
      border: solid 1px #33be85;
      border-radius: 3px;
      padding: 3px 15px;
    }
    .HouseDetail_user {
      margin-bottom: 10px;
      display: flex;
      img {
        width: 52px;
        height: 52px;
        margin: 10px 10px 0 0;
      }
      .HouseDetail_useInfo {
        padding: 15px 0 0 5px;
        .HouseDetail_userAuth {
          font-size: 12px;
          color: #fa5741;
        }
      }
    }
  }
}
.HouseDetail_recommend {
  margin: 10px 0 0 0;
  padding: 0 15px;
  background: #fff;
  .HouseDetail_houseTitle {
    font-weight: 600;
    margin-bottom: 10px;
    padding: 15px 0;
    font-size: 12px;
    border-bottom: solid 1px #cecece;
  }
  .HouseDetail_items {
    .HouseItem_house {
      height: 120px;
      position: relative;
      box-sizing: border-box;
      justify-content: space-around;
      padding-top: 18px;
      border-bottom: 1px solid #e5e5e5;
      .HouseItem_img {
        float: left;
        width: 106px;
        height: 80px;
        img {
          width: 100%;
        }
      }
      .HouseItem_content {
        overflow: hidden;
        line-height: 22px;
        padding-left: 12px;
        h3 {
          margin: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: middle;
          font-size: 15px;
          color: #394043;
        }
        .HouseItem_desc {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: middle;
          font-size: 12px;
          color: #afb2b3;
        }
        .HouseItem_tag {
          color: #39becd;
          background: #e1f5f8;
          display: inline-block;
          font-size: 12px;
          border-radius: 3px px;
          padding: 4px 5px;
          margin-right: 5px;
          line-height: 12px;
        }
        .HouseItem_price {
          font-size: 12px;
          color: #fa5741;

          span {
            font-size: 16px;
            font-weight: bolder;
          }
        }
      }
    }
  }
}
.HouseDetail_fixedBottom {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-top: 1px solid #cecece;
  text-align: center;
  font-size: 17px;
  color: #999;
  background-color: #fff;
  .am-flexbox-item {
    box-sizing: border-box;
    flex: 1 1;
    margin-left: 8px;
    min-width: 10px;
    a {
      color: #fff;
      text-decoration: none;
      outline: none;
    }
    &:first-child {
      margin-left: 0;
      border-right: solid 1px #e8e8e9;
    }
    &:last-child {
      border-right: solid 1px #e8e8e9;
      background-color: #21b97a;
    }
  }
  .opt {
      > .van-icon {
      &.active {
        color: #fff222;
      }
      }
  }
}
</style>
